@import url('../../index.less');

.container {
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
  > .menu {
    position: fixed;
    width: 100px;
    z-index: 1000;
    box-shadow: 0 2px 22px 1px rgba(0, 0, 0, 0.2);
  }
  > .itemsContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    > .item {
      margin: 15px;
      flex-grow: 1;
      position: relative;
      cursor: pointer;
      flex-shrink: 1;
      flex-grow: 0;
      > .content {
        position: absolute;
        left: 0;
        height: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        > .addIcon {
          font-size: 18px;
        }
      }
    }
    > .item:after {
      display: block;
      content: '';
      margin-bottom: 100%;
    }

    > .item:hover {
      transform: translate3d(0, -1px, 0);
      box-shadow: 0 2px 22px 1px rgba(0, 0, 0, 0.2);
    }

    > .add {
      border: 1.5px dashed @greyTwo;
    }
  }
}

.breadItem {
  cursor: pointer;
}
